<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS and CSS Clock</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="clock">
<div class="clock-face">
<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>
</div>
</div>
</body>
<script>
const secondHand=document.querySelector('.second-hand');
const minHand=document.querySelector('.min-hand');
const hourHand=document.querySelector('.hour-hand');
function setDate(){
const now=new Date();
const second=now.getSeconds();
const min=now.getMinutes();
const hour=now.getHours();
const secondDegrees=((second/60)*360)+90;
const minDegrees=((min/60)*360)+90;
const hourDegrees=((hour/12+90)*360)+((min/60)*30);
if(secondDegrees===90){
secondHand.style.transition='all 0s';
}
else{
secondHand.style.transition='all 0.05s';}

if(minDegrees===90){
minHand.style.transition='all 0s';
}
else{
minHand.style.transition='all 0.05s';}

secondHand.style.transform=`rotate(${secondDegrees}deg)`;
minHand.style.transform=`rotate(${minDegrees}deg)`;
hourHand.style.transform=`rotate(${hourDegrees}deg)`;
}
setInterval(setDate,1000);
setDate();
</script>
</html>